<template>
    <div>
        <h1>商品列表</h1>
        <router-link to="/dish/add">
            <el-button type="primary">添加</el-button>
        </router-link>
        <template>
        <el-table
        :data="dishlist"
        style="width: 100%">
        <el-table-column
            prop="name"
            label="商品名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="price"
            label="价格"
            width="180">
        </el-table-column>
        <el-table-column
            label="商品图片">
            <template slot-scope="scope">
                <img :src="scope.row.imgpath" width="100" height="100" alt="">
            </template>
        </el-table-column>
        <el-table-column
            label="规格">
            <template slot-scope="scope">
                <span v-for="(item, index) in scope.row.specifications.split('=====')" :key="index">{{item}}</span>
            </template>
        </el-table-column>
        <el-table-column
            label="类别">
            <template slot-scope="scope">
                <span v-for="(item, index) in scope.row.kind.split('=====')" :key="index">{{item}}</span>
            </template>
        </el-table-column>
        <el-table-column
            label="是否上架">
            <template slot-scope="scope">
                <el-switch
                    v-model="scope.row.enable"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                </el-switch>
            </template>
        </el-table-column>
        <el-table-column
            prop="catname"
            label="分类名称">
        </el-table-column>
        </el-table>
    </template>
    </div>
</template>

<script>
import {dishList} from '@/request'
export default {
    data () {
        return {
            dishlist: []
        }
    },
    methods: {
        getDishList() {
            dishList().then(data => {
                console.log(data);
                if(data.error_code === 200) {
                    this.dishlist = data.data.dishlist.map(item => {
                        item.imgpath = '/admin/' + item.imgpath
                        return item
                    })
                }
                
            })
        }
    },
    created() {
        this.getDishList()
    }
}
</script>

<style>
    
</style>
